.center-part {

  border-right: 1px solid #ccc;
  width: 230px;

  .search-box {
    margin: 10px auto;
    border: 1px solid #ccc;
    height: 30px;
    font-size: 25px;
    line-height: 30px;
    border-radius: 16px;
    width: 80%;
    position: relative;
    font-size: 0;
    overflow: hidden;

    &::before {
      content: "";
      background: url("~@/assets/images/search.png") no-repeat center/cover;
      width: 15px;
      height: 15px;
      position: absolute;
      top: 50%;
      left: 5px;
      transform: translateY(-50%);
    }

    input {
      width: 100%;
      height: 100%;
      padding: 0 10px 0 23px;
    }

  }

  .userlist {
    width: 100%;
    height: calc(100% - 50px);
    overflow-x: hidden;
    overflow-y: auto;
    &::-webkit-scrollbar{
      display:none;
    }

    .item {
      height: 70px;
      display: flex;
      padding: 10px;
      box-sizing: border-box;
      overflow: hidden;

      &.on,
      &:hover {
        background-color: #ededed;
      }

      img {
        width: 50px;
        height: 50px;
        background-color: skyblue;
        margin-right: 10px;
      }

      .item-userinfo {
        width: 170px;
        overflow: hidden;
        position: relative;

        >div {
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 100%;
          overflow: hidden;
          line-height: 25px;
        }
        .tips{
          background-color: #e64b15;
          padding: 0 3px;
          position:absolute;
          right: 5px;
          bottom: 2px;
          border-radius:10px ;
          color: #f2f2f2;
        }
      }
    }

  }
}